<template>
    <div>
        <ant-table
            :columns="columns"
            :data="data"
            :status="status"
            @Change="Change"
            @handleSubmit="handleSubmit"
            @Reset="Reset"
            @onSelectChange="onSelectChange"
            @emptySelect="emptySelect"
            @Add="Add"
            @SureDelete="SureDelete"
            :selectedRowKeys="selectedRowKeys"
            add
            batch
            more
            >

            <template #more="{record}">
                <a class="ant-more"
                    v-for="(item,index) in options"
                    :key="index"
                    @click="Actions(item,record)"
                    >{{item}}</a>

                <a-popconfirm
                    title="是否删除?"
                    @confirm="confirm(record)"
                    @cancel="cancel"
                    okText="确定"
                    cancelText="取消"
                    >
                    <a href="#">删除</a>
                </a-popconfirm>
            </template>

        </ant-table>

        <!-- 打开抽屉 -->
        <open-drawer
            v-if="visible"
            :visible="visible"
            :title="title"
            @onClose="onClose"
            @Submit="Submit"
            :roleList="roleList"/>
            
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
const OpenDrawer = () => import("./Operation.vue").then(m => m.default || m);

@Component({
    name: "sys-user",
    layout: "menu",
    components: {
        OpenDrawer
    }
})
export default class SysUser extends Vue {
    form: Object = {};
    status: boolean = false;
    selectedRowKeys: string[] = [];
    options: string[] = ["详情", "密码"];
    visible: boolean = false;
    title: string = "添加";
    data: any[] = [
        {
            name: "测试",
            id: 1,
            email: "851708184@qq.com"
        },
        {
            name: "测试22222",
            id: 2,
            email: "851708184@qq.com"
        },
        {
            id: 3,
            name: "测试333",
            email: "851708184@qq.com"
        }
    ];
    columns: any[] = [
        {
            title: "Name",
            dataIndex: "name",
            width: "20%"
        },
        {
            title: "Gender",
            dataIndex: "gender",
            width: "20%"
        },
        {
            title: "Email",
            dataIndex: "email"
        },
        {
            title: "Action",
            key: "action",
            width: 100,
            scopedSlots: { customRender: "action" }
        }
    ];
    roleList: any[] = [
        {
            id: 1,
            title: "基础角色"
        },
        {
            id: 2,
            title: "超级管理员角色"
        }
    ];
    Change(val: boolean) {
        this.status = !val;
    }
    handleSubmit() {
        console.log(this.form);
    }
    Reset() {
        this.form = {};
    }
    onSelectChange(val: string[]) {
        console.log(val, "选择的数组");
        this.selectedRowKeys = val;
    }
    emptySelect() {
        this.selectedRowKeys = [];
    }
    confirm(val: object) {
        console.log("点击了确定", val);
    }
    cancel() {
        console.log("点击了取消");
    }
    onClose() {
        this.visible = false;
    }
    Add() {
        this.visible = true;
        this.title = "添加";
    }
    Submit(val) {
        this.visible = false;
        console.log(val, "添加的值");
        this.$message.success("添加成功");
    }
    SureDelete(){
        console.log("批量删除");
    }
    Actions(val: string, record: object) {
        switch (val) {
            case "详情":
                this.visible = true;
                this.title = "详情";
                break;
            case "密码":
                break;
            case "删除":
                break;
            default:
                break;
        }
    }
}
</script>
